<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息列表</title>
<style type="text/css">
*{padding:0;margin:0}
body{width:90%;font-size:14px;font-family:Microsoft Yahei;padding:40px;font-family:华文楷体}
		table{border-collapse: collapse; border-spacing: 0;width:100%;border: 1px solid #ccc;}
		table th{background-color: #f1f1f1;}
		table th, table td{border: 1px solid #ccc;color:#555;padding:5px 10px;}
		input{border:1px solid #eee;padding:3px 6px;color:#666;}
		form{height:50px;}
		.topbar{height:60px;padding:0;}
		.topbar li{float:left;padding-right:20px;list-style:none;}
		ul{list-style:none}
		nav ul  li{min-width:100px;min-height:50px;float:left}
		header{background-color:#f1f1f1;min-height:70px;width:100%;line-height:70px}
		header ul  li{min-width:100px;min-height:50px;float:left;}
		footer ul li{ min-width:100px;min-height:50px;float:left}
		a{text-decoration: none;}
		a:visited{ color:black}
		aside {
			width:200px;
			min-height:500px;
			background-color:#f1f1f1;
			over-flow:auto;
			float:left;
		}
		
		section{
			float:left;
			width:800px;
			min-height:500px;
			
		}
		section  iframe{
			width:100%;
			height:600px;
			border:none;
		}
		
		



</style>	

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="static/js/lanqiao.js"></script>
<script type="text/javascript">
		//利用request函数，获取URL中的id属性值
		var   id =request("id");   //如果点击的是id是3的记录   获得id值就是3
		
		
</script>




</head>
<body>
	<h2>基于Vue 使用Servlet完成一个前后端分离版本的增删改查案例</h2>
	<br/>
	<h3>用户信息</h3>
	<br/>
	
	<div id="app">
	
		<table border="1">
				  <tr>
				    <th style="width:200px">编号</th>
				    <td>
				    	{{user.id}}
				    </td>
				
				</tr>
				 <tr>
				    <th>用户名</th>
				    <td>
				    {{user.username}}
				    </td>
				   
				</tr>
				  <tr>
				    <th>密码</th>
				    <td>
				      {{user.password}}
				    </td>
				 
				</tr>
				  <tr>
				    <th>邮箱</th>
				    <td>
				    {{user.email}}
				    </td>
				
				</tr>
				  <tr>
				    <th>电话</th>
				    <td>
				      {{user.telphone}}
				    </td>
				  
				</tr>
				  <tr>
				    <th>昵称</th>
				    <td>
				      {{user.nickname}}
				    </td>
				  
				</tr>
	</table>
</div>
</body>


<script type="text/javascript">
		var vue =new Vue({
			el:'#app',
			data:{
				user:{}
			},
			methods:{
				init:function(){
					
					var  _self=this;
					//自定义 一个函数 ，用来查询所有的用户信息，返回Json  查询的不是全部信息 而是一个信息
					$.get("/Tust-lanqiao-demo/user/byid",{params_id:id},function(data){
						
						console.log(data);
						_self.user=data;
					},"json");
				}
				
				
			}
			
			
		});
		//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
		vue.init();

</script>


</html>